<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="true"/>

    <title>Changing the language dynamically</title>

    <link rel="stylesheet" href="../examples.css">

    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <script type="text/javascript" src="../../dist/iink.min.js"></script>
  </head>

  <body>
  <nav>
    <select id="language"></select>
  </nav>
    <div id="editor" touch-action="none"></div>
    <script>
      const languageElement = document.getElementById('language');
      const editorElement = document.getElementById('editor');

      languageElement.addEventListener('change', (e) => {
        const configuration = editorElement.editor.configuration;
        //The path to the language depend of the version of API you are using.
        configuration.recognitionParams.iink.lang = e.target.value;
      });

      const configuration = {
        recognitionParams: {
          type: 'TEXT',
          protocol: 'WEBSOCKET',
          server: {
            scheme: 'https',
            host: 'webdemoapi.myscript.com',
            applicationKey: '515131ab-35fa-411c-bb4d-3917e00faf60',
            hmacKey: '54b2ca8a-6752-469d-87dd-553bb450e9ad'
          }
        }
      };

      /**
       * Retrieve the list of available recognition languages using local json file
       * @param {Object} The editor recognition parameters
       */
      const currentLanguage = 'en_US';
      iink.getAvailableLanguageList(configuration)
        .then((res) => {
          if (languageElement.options.length === 0) {
            Object.keys(res.result).forEach((key) => {
              const selected = currentLanguage === key;
              languageElement.options[languageElement.options.length] = new Option(res.result[key], key, selected, selected);
            });
          }
        })
        .catch(error => console.error(error))

      iink.register(editorElement, configuration);
    </script>
  </body>

</html>